<template>
	<div>
		<div class="select">
			<div class="item" v-for="item in selectItem" v-bind:key="item.Id">
				{{ item.TagName }}
			</div>
		</div>
		<div class="flex">
			<div class="flex-left">
				<div class="navigationBar">
					<label>目录结构</label>
				</div>
				<div class="flex-tree">
					<div
						:class="tableIndex == item.Id ? 'hover tree-item' : 'tree-item'"
						v-for="item in tableList"
						v-bind:key="item.Id"
						@click="tableClick(item)"
					>
						{{ item.FolderName }}
					</div>
				</div>
			</div>
			<div class="flex-right">
				<navigation-bar customTitle="标签">
					<div class="searchContent">
						<el-input
							v-model="tagName"
							placeholder="请输入标签名称"
							size="mini"
							style="width: 150px; margin-right: 10px"
						></el-input>
						<custom-button
							type="search"
							style="margin-right: 10px"
							@searchClick="searchClick"
						></custom-button>
						<custom-button
							type="reset"
							style="margin-right: 10px"
							@resetClick="resetClick"
						></custom-button>
					</div>
				</navigation-bar>
				<tableHeightIndex
					:dataSource="dataSource"
					:tableColumns="tableColumns"
					:btnList="btnList"
					:pageSize="pageSize"
					:pageCount="pageCount"
					:pageNo="pageNo"
					@pageChange="pageChange"
					@handleSelectionChange="handleSelectionChange"
					:height="curHeight"
					selection
				></tableHeightIndex>
				<!-- selection tableIndex的勾选属性，批量删除时放开，暂未接口 -->
			</div>
		</div>
		<div class="singleBtn">
			<el-button
				size="small"
				type="primary"
				style="margin-right: 10px; color: #fff"
				@click="singleBtnClick"
			>
				<i class="el-icon-check"></i> 勾选确定
			</el-button>
		</div>
	</div>
</template>

<script>
	import { tagFolderForm } from "@/assets/form/managementCenter/tagFolderForm"
	import { tagManageForm } from "@/assets/form/managementCenter/tagManageForm"
	import customButton from "@/components/customComponents/customForm/customButton"
	import tableHeightIndex from "@/components/customComponents/customeTable/tableHeightIndex.vue"
	import navigationBar from "@/components/customComponents/managementCenter/navigationBarCustom"
	import { AjaxCommon } from "@/libs/apiCommon"
	import { PopupCommon } from "@/libs/popupCommon"
	export default {
		components: {
			navigationBar,
			customButton,
			tableHeightIndex,
		},
		// props: ["fileId"],
		data() {
			return {
				curHeight: 400,
				dialogFolderShow: false,
				tableIndex: "",
				tableList: [
					{
						FolderName: "",
						EnCode: "",
						// 相当于parentId
						LastFolderId: "",
						FullEnCode: "",
						IsDelete: false,
						Id: "",
					},
				],
				selectItem: [],
				tagName: "",
				// table 相关参数  begin
				dataSource: [],
				tableColumns: [
					{
						prop: "TagName",
						label: "标签名称",
					},
					{
						prop: "Descipt",
						label: "标签说明",
						width: 120,
					},
					// {
					// 	prop: "userage",
					// 	label: "创建时间",
					// },
				],
				btnList: [],
				pageSize: 20,
				pageCount: 100,
				pageNo: 1,
				// table 相关参数  end

				// 弹窗是否显示
				dialogShow: false,
				// 弹窗标题 (新增修改不同)
				dialogTitle: "",

				// form的配置信息
				formConfig: tagManageForm,
				type: "add",

				formConfigFolder: tagFolderForm,
				typeFolder: "add",
				dialogFolderTitle: "新增目录",
			}
		},
		methods: {
			singleBtnClick() {
				if (this.selectItem.length == 0) {
					PopupCommon.notify("info", "请选择标签")
					return
				}
				this.$emit("success", JSON.stringify(this.selectItem))
			},
			tableClick(item) {
				this.tableIndex = item.Id
				this.initPage()
			},
			handleSelectionChange(d) {
				this.selectItem = d
			},
			formInputFolderChange(e) {
				console.log(e, "e...................")
			},
			formInputChange(e) {
				// if (e.filedName == "idCard") {
				// 	const data = CardId.getInfoByCardId(e.value)
				// 	if (data) {
				// 		let newData = e.allData
				// 		newData["birthday"] = data.birthday
				// 		newData["sex"] = data.sex
				// 		this.$refs.form.changeFormValue(newData)
				// 	}
				// }
				console.log(e)
			},

			searchClick() {
				this.pageNo = 1
				this.initPage()
			},
			resetClick() {
				this.tagName = ""
			},

			// 分页点击事件
			pageChange(p) {
				this.pageNo = p
				this.initPage()
			},

			initLeftFolder(callback) {
				let self = this
				self.tableList = []
				AjaxCommon("/api/folder?folderType=6", "get", null).then((res) => {
					if (res.data.status == 200) {
						self.tableList = res.data.response
						if (self.tableList && self.tableList.length > 0) {
							this.tableIndex = self.tableList[0].Id
							callback()
						} else {
							self.tableIndex = ""
							self.tableList = []
						}
					} else {
						PopupCommon.notify("error", res.data.msg)
					}
				})
			},
			// 初始化事件
			initPage() {
				// 差个搜索功能
				let self = this
				var params = `FolderID=${this.tableIndex}`
				if (this.tagName) {
					params += "&TagName=" + this.tagName
				}
				AjaxCommon(`/api/Tag?${params}`, "get", null).then((res) => {
					console.log(res, "res....")
					if (res.data.status == 200) {
						self.dataSource = res.data.response
						// self.pageCount = res.data.response.dataCount
					} else {
						PopupCommon.notify("error", res.data.msg)
					}
				})
			},
		},
		mounted() {
			this.$nextTick(() => {
				this.initLeftFolder(() => {
					this.initPage()
				})
			})
		},
	}
</script>

<style scoped>
	.flex {
		display: flex;
		margin-bottom: 20px;
	}

	.flex .flex-left {
		width: 350px;
		margin-right: 10px;
	}

	.flex .flex-right {
		flex: 1;
	}

	.flex .flex-left .navigationBar {
		height: 36px;
		line-height: 36px;
		background-color: #fff;
		margin-top: 10px;
	}

	.flex .flex-left .flex-tree {
		background-color: #fff;
		margin-top: 10px;
		height: 400px;
		overflow-y: auto;
	}

	.flex .flex-left .flex-tree .delete {
		color: red;
		float: right;
		margin-top: 9px;
		cursor: pointer;
	}
	.flex .flex-left .flex-tree .edit {
		color: blue;
		float: right;
		margin-top: 9px;
		cursor: pointer;
		margin-right: 10px;
	}

	.flex .flex-left .flex-tree .tree-item {
		height: 32px;
		line-height: 32px;
		margin: 5px 10px;
		padding: 0 10px;
		font-size: 14px;
		cursor: pointer;
	}
	.flex .flex-left .flex-tree .tree-item:hover {
		background-color: #e4f1fe;
	}
	.flex .flex-left .flex-tree .hover {
		background-color: #e4f1fe;
	}

	.flex .flex-left .navigationBar label {
		text-align: left;
		font-size: 16px;
		color: #333;
		margin-left: 10px;
	}

	.flex .flex-left .navigationBar span {
		float: right;
		margin-right: 10px;
		color: #333;
		cursor: pointer;
	}

	.singleTable {
		margin-bottom: 20px;
	}
	.singleBtn {
		position: absolute;
		bottom: 8px;
		right: 9px;
	}

	.select {
		font-size: 14px;
		line-height: 30px;
		padding: 5px 10px;
	}

	.select .item {
		display: inline-block;
		padding: 0px 10px;
		text-align: center;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.singleBtn {
		position: absolute;
		bottom: 8px;
		right: 9px;
	}
</style>
